import { memo, useMemo, useState } from "react";
// React.memo

// 1.验证默认的渲染机制，子跟父一起渲染
// function Son() {
//   console.log("我是子组件，我重新渲染了");
//   return <div>this is son</div>;
// }

//2. memo进行缓存,只有props发生变化的时候才会重新渲染
const MemoSon = memo(function Son() {
  console.log("我是子组件，我重新渲染了");
  return <div>this is son</div>;
});

const MemoSon2 = memo(function Son2({ num }) {
  // props的变化导致组件重新渲染
  console.log("子组件重新渲染");
  return <div>this is son2：{num}</div>;
});

export default function ReactMemo() {
  const [count, setCount] = useState(0);
  const [num, setNum] = useState(0);
  //   const num1=100; // 静态的不会改变
  //   const list = [1, 2, 3]; // 这里父组件重新渲染导致引用更新，变化了
  const list = useMemo(() => [1, 2, 3], []);

  return (
    <div className="container">
      <p>作用：允许组件在Props没有改变的情况下跳过渲染</p>
      <button onClick={() => setCount(count + 1)}>+ {count}</button>
      {/* <Son /> */}
      <MemoSon />

      <hr />
      <h2 style={{ textAlign: "left" }}>React.memo - props的比较机制</h2>
      <p>
        机制：在使用memo缓存组件之后，React会对每个prop使用`Object.is`比较新值和旧值。返回true，表示没有变化
      </p>
      <p style={{ textAlign: "left", marginLeft: 50 }}>
        <p>prop是简单类型：</p>
        <p>Object.is(3,3) =&gt; true 没有变化</p>
        <p>prop是引用类型（对象、数组）</p>
        <p>Object.is([], []) =&gt; false 有变化，React只关心引用是否变化</p>
      </p>
      {/* 这里可以进行更改！！！！！ */}
      <MemoSon2 num={list} />
      <button onClick={() => setNum(num + 1)}>num+1:{num}</button>
    </div>
  );
}
